<%@ page import="com.hdwx.weike.service.impl.VideoServiceImpl" %>
<%@ page import="com.hdwx.weike.service.IVideoService" %>
<%@ page import="com.hdwx.weike.beans.VideoBean" %>
<%@ page import="java.util.List" %>
<%@ page import="java.util.ArrayList" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>首页</title>
    <meta name="viewport" content="width=device-width,
                                     initial-scale=1.0,
                                     maximum-scale=1.0,
                                     user-scalable=no">
    <link href="static/dist/css/bootstrap.css" rel="stylesheet">
    <style type="text/css">
        *{
            padding: 0;
            margin: 0;
        }
        #top{
            height: 130px;
        }
        #top>div {
            position: relative;
            left:80px;
            height: 130px;
            line-height: 130px;
            float: left;
        }
        #top_logo>img{
            position: relative;
            top:30px;
        }
        #top #search,#top #user_do{
            position: relative;
            top: 50px;;
            height: 35px;
            left: 50px;
            line-height: 35px;
            float: left;
        }
        #top #user_do{
            margin-left: 50px;
        }
        /*模糊搜索框*/
        #top #search input{
            padding: 0 60px;
            height: 100%;
            width: 400px;
        }
        #top #search #sel1{
            position: absolute;
            height: 135px;
            width: 60px;
        }
        #top #search button{
            background-color: white;
            outline: none;
            border: 0;
            border-right: 1px solid black;
            position: absolute;
            height: 25px;
            line-height: 25px;
            width: 50px;
            margin: 5px 2px;
        }
        #top #search #img{
            position: absolute;
            height: 100%;
            width: 45px;
            right: 0;
            top: 0;
            padding: 6px 10px;
            background-color: #40a9ff;
        }
        #top #search>div img{
            margin: 6px 12px;
        }
        /*登录注册*/
        #top #user_do>a{
            position: relative;
            left: 50px;
            margin-left: 20px;
            text-decoration: none;
            color: black;
        }

        .my_container{
            margin: 0 60px;

        }
        #left_nav{
            z-index: 5;
        }
        /*左边导航*/
        #left_nav #all_course{
            padding: 10px ;
            background:url("static/img/menu.png") no-repeat center left 10px #40a9ff;
        }
        #left_nav #all_course>a,#left_nav #all_course>a:hover{
            font-weight: 600;
            color: white;
            font-size: 16px;
            padding-left: 40px;
            text-decoration: none;
        }
        #left_nav .types{
            position: relative;
            padding: 5px;
            background:url("static/img/sanjiao.png") no-repeat top 12px left 5px #4997ca;
            border-bottom: 2px solid #77c3e8;
            /*opacity: 0.8;*/
        }
        #left_nav .types:hover{
            background-color: #1966a4;
        }
        #left_nav .types p a,#left_nav .types p a:hover{
            color: #97d2f7;
            font-weight: 600;
            display: inline-block;
            margin-top: 5px;
            margin-right: 20px;
            text-decoration: none;
        }
        #left_nav .types .types_title,#left_nav .types .types_title:hover{
            color: white;
            font-size: 16px;
            font-weight:600;
            margin-left: 20px;
        }
        /*右边导航*/
        #right_nav #right_nav_top>ul>li{
            z-index: 10;
            position: relative;
            left: -110px;
            list-style: none;
            float: left;
            margin:10px 25px;
            font-size: 16px;
        }
        #right_nav #right_nav_top>ul a{
            text-decoration: none;
            color: black;
            font-weight: 600;
        }
        #right_nav #right_nav_top>ul a:hover{
            color: #40a9ff;
        }
        #right_nav #right_nav_top #exception{
            position: relative;
            left: 50px;
        }
        #right_nav #right_nav_top #exception a,#right_nav #right_nav_top #exception a:hover{
            font-size: 14px;
            font-weight: 400;
            text-decoration: none;
            color: black;
        }

        #right_nav_bottom{
            position: relative;
            margin-left: -53px;
            margin-top: -70px;
            padding: 0;
            left: 290px;
            bottom:16px;
            width: 1010px;
            border-bottom: 1px solid #eaeaea;
            border-right: 1px solid #eaeaea;
        }
        #right_nav_bottom a{
            position: relative;
            float: left;
            margin: 0px 10px;
        }



        .jpwk{
            position: relative;
            margin-top: 20px;
        }
        .title{
            border-bottom: 2px solid #ececec;
            margin-left: 15px;
            padding-left: 30px;
            height: 50px;
            line-height: 50px;
            font-weight: 600;
            background:url("static/img/ico_5.png") no-repeat center left ;
        }
        .title>a{
            color: #666666;
            font-size: 14px;
            font-weight: 400;
            position: relative;
            left: 800px;
        }
        .title>a:hover{
            text-decoration: none;
            color: #40bbff;
        }
        .logo1{
            margin-top: -10px;
        }
        .videos{
            position: relative;
            height: 200px;
            left:-40px;
            margin-top: 10px;
        }
        .videos:hover{
            border: 1px solid #ececec;
        }
        .videos .videos_url>a{
            color: black;
            text-decoration: none;
        }
        .videos .videos_url>a:hover{
            color: #45a9ff;
            text-decoration: none;
        }
        .videos .user a,.videos .user a:hover{
            text-decoration: none;
            color: #5fb41b;
        }
        .videos .user a+a,.videos .user a+a:hover{
            color: #999999;
            text-decoration: none;
        }
        .title2{
            height: 60px;
            line-height: 60px;
            padding: 10px;
            border-bottom: 2px solid #ececec;
        }
        .text{
            background: url("static/img/docx.png") no-repeat left top 4px;
            height: 52px;
        }
        .text:hover{
            background-color: #dcdcdc;
        }
        .text a{
            color: black;
            text-decoration: none;
        }
        .text a:hover{
            text-decoration: none;
            color: #40a9ff;
        }
        .text>p{
            margin-left: 5px;
            margin-bottom: 0px;
        }
        .right_side h5{
            border-bottom: 1px solid #ececec;
        }
        .right_side h5 a{
            display: inline-block;
            height: 40px;
            line-height: 40px;
            margin-left: 130px;
            color: #666666;
        }
        .right_side h5 a:hover{
            text-decoration: none;
            color: #40bbff;
        }
        
        #union_school_title{
            background-image:url("static/img/ico_6.png") ;
        }
        .videos .detail{
            color: #999999;
        }
        .videos .detail span{
            color: red;
        }
        .person{
            height: 52px;
        }
        .person>div{
            margin-top: 5px;
            margin-left: 10px;
            float: left;;
        }
        .person>div p{
            margin-top: 0px;
            margin-bottom: 2px;
        }
        .person div img{
            margin-left: -20px;
            height: 45px;
            width:45px;
        }
        .person div a,.person div a:hover{
            color: #5fb41b;
            text-decoration: none;
        }
        .mymark{
            margin-left: 4px;
            margin-bottom: 2px;
            display: inline-block;
            width: 0px;
            height: 0px;
            border-top: 4px solid;
            border-right: 4px solid transparent;
            border-left: 4px solid transparent;
        }
        #search ul{
            opacity: 0;
            position: relative;
            top: 35px;
            list-style: none;
            border: 1px solid #e2e2e2;
            width: 52px;
            height: 92px;
            z-index: 5;
        }
        #search ul li{
            height: 30px;
            line-height: 30px;
            text-align: center;
            background-color: white;
        }
        #search ul li:hover{
            cursor: pointer;
            background-color: #e2e2e2;
        }
        #roll_img{
            position: absolute;
            top: 170px;
            height: 200px;
            width: 100%;
            z-index:2;
        }
        #roll_img img{
            width: 100%;
            height: 350px;
        }

        /*卡片切换样式*/
        #primary_edu{
            background-color: white;
            position: absolute;
            left: 207px;
            width: 280px;
            top: 0px;
            border: 2px solid #0e578e;
            border-left: none;
        }
        #junior_edu{
            background-color: white;
            position: absolute;
            left: 207px;
            width: 280px;
            top: 0px;
            border: 2px solid #0e578e;
            border-left: none;
        }
        #senior_edu{
            background-color: white;
            position: absolute;
            left: 207px;
            width: 280px;
            top: 0px;
            border: 2px solid #0e578e;
            border-left: none;
        }
        .el{
            display: inline-block;
            margin: 5px 30px;
            padding: 2px;
            color: black;
            text-decoration: none;
        }
        .el:hover{
            cursor: pointer;
            text-decoration: none;
            background-color: #0e578e;
            color: white;
        }

    </style>
    <script src="jQuery/jquery-1.11.3.js"></script>
    <script src="js/home.js"></script>
    <script src="js/videolist.js"></script>
</head>
<body>
<div id="top">
    <div id="top_logo"><img src="static/img/logo.png"></div>
    <div>
        <%-- 模糊搜索 --%>
        <div id="search">
            <div id="sel1"><button name="wk"><span id="seled">微课</span><span class="mymark"></span></button>
                <ul class="hidden" style="z-index: 11">
                    <li id="sel2">文档</li>
                    <li id="sel3">教师</li>
                    <li id="sel4">学校</li>
                </ul>

            </div>
            <input type="text" placeholder="请输入搜索关键字" class="search_content">
            <a href=""><div id="img" class="search_course"><img src="static/img/seach.gif"></div></a>

        </div>
        <%-- 登录注册 --%>
        <div id="user_do">
                <%
                    HttpSession session1 = request.getSession(false);
                    if(session1!=null&&session1.getAttribute("account")!=null){
                %>
                    <h5>欢迎用户：<%=session1.getAttribute("account")%>  <a href="exit.do" style="margin-left: 20px">注销</a></h5>
                <%
                    }else{
                %>
                    <a href="login.jsp"><img src="static/img/ico_2.gif"> 登录</a>
                    <a href="register.jsp"><img src="static/img/ico_1.gif"> 注册</a>
                <%
                    }
                %>




        </div>
    </div>
</div>

<%-- 滚动图片--%>
<div id="roll_img">
    <img src="static/img/roll1.jpg">
</div>


<div class="my_container">
    <div class="row">
        <%-- 左边导航栏 --%>
        <div id="left_nav" class="col-md-3">
            <div class="col-md-10" >
                <div class="col-md-12" id="all_course"><a href="videolist">全部课程</a></div>

                <div class="col-md-12 types" id="primary_edu_a">

                    <p><a href="videolist?sectionId=1" class="types_title">小学教育</a></p>
                    <p><a href="">一年级</a><a href="">二年级</a><a href="">三年级</a></p>
                    <p><a href="">四年级</a><a href="">五年级</a><a href="">六年级</a></p>
                    <div id="primary_edu" class="hidden">
                        <a href="" class="el">语文</a><a href="" class="el">数学</a><a href="" class="el">英语</a><a href="" class="el">生物</a><a href="" class="el">政治</a><a href="" class="el">历史</a>
                        <a href="" class="el">地理</a><a href="" class="el">科学</a><a href="" class="el">信息</a><a href="" class="el">音乐</a><a href="" class="el">美术</a><a href="" class="el">体育</a>
                        <a href="" class="el">实践</a><a href="" class="el">劳技</a><a href="" class="el">健康</a><a href="" class="el">科技</a><a href="" class="el">书法</a><a href="" class="el">手工</a>
                        <a href="" class="el">综合</a>
                    </div>

                </div>



                <div class="col-md-12 types" id="junior_edu_a">
                    <p><a href="videolist?sectionId=2" class="types_title">初中教育</a></p>
                    <p><a href="">初一</a><a href="">初二</a><a href="">初三</a></p>
                    <div id="junior_edu" class="hidden">
                        <a href="" class="el">语文</a><a href="" class="el">数学</a><a href="" class="el">英语</a><a href="" class="el">物理</a><a href="" class="el">化学</a><a href="" class="el">生物</a>
                        <a href="" class="el">政治</a><a href="" class="el">历史</a><a href="" class="el">地理</a><a href="" class="el">科学</a><a href="" class="el">信息</a><a href="" class="el">音乐</a>
                        <a href="" class="el">美术</a><a href="" class="el">体育</a><a href="" class="el">实践</a><a href="" class="el">劳技</a><a href="" class="el">书法</a><a href="" class="el">综合</a>
                    </div>
                </div>
                <div class="col-md-12 types" id="senior_edu_a">
                    <p><a href="videolist?sectionId=3" class="types_title">高中教育</a></p>
                    <p><a href="">高一</a><a href="">高二</a><a href="">高三</a></p>
                    <div id="senior_edu" class="hidden">
                        <a href="" class="el">语文</a><a href="" class="el">数学</a><a href="" class="el">英语</a><a href="" class="el">物理</a><a href="" class="el">化学</a><a href="" class="el">生物</a>
                        <a href="" class="el">政治</a><a href="" class="el">历史</a><a href="" class="el">地理</a><a href="" class="el">信息</a><a href="" class="el">音乐</a><a href="" class="el">美术</a>
                        <a href="" class="el">体育</a><a href="" class="el">实践</a><a href="" class="el">通技</a>
                    </div>
                </div>
                <div class="col-md-12 types">
                    <p><a href="videolist?sectionId=4" class="types_title">职业教育</a></p>
                </div>
                <div class="col-md-12 types">
                    <p><a href="videolist?sectionId=6" class="types_title">高等教育</a></p>
                </div>
                <div class="col-md-12 types">
                    <p><a href="videolist?sectionId=7" class="types_title">继续教育</a></p>
                </div>
            </div>

       </div>
        <%-- 右边导航栏 --%>
        <div id="right_nav" class="col-md-9">
            <%--顶部导航--%>
            <div id="right_nav_top" class="col-md-12">
                <ul>
                    <li><a href="videolist">微课</a></li>
                    <li><a href="">文档</a></li>
                    <li><a href="">教师</a></li>
                    <li><a href="">学校</a></li>
                    <li><a href="">大赛</a></li>
                    <li><a href="">考核</a></li>
                    <li><a href="">资讯</a></li>
                    <li><a href="">统计</a></li>
                    <li id="exception"><img src="static/img/sc.jpg"><a href="">我要上传</a> | <a href="feedback.jsp">意见反馈</a> </li>
                </ul>

            </div>
        </div>

        <%-- 右边底部 图片链接--%>
        <div id="right_nav_bottom" class="col-md-12">
            <a href=""><img src="static/img/ad_img2.png"></a>
            <a href=""><img src="static/img/ad_img1.png"></a>
            <a href=""><img src="static/img/ad_img3.jpg"></a>
            <a href=""><img src="static/img/ad_img4.jpg"></a>
        </div>

    </div>
    <!-- 精品微课-->
    <div class="row" class="jpwk">
        <div class="col-md-10">   <!-- 左边内容-->
            <h3 class="title">精品微课<a href="">更多>></a></h3>
            <div class="col-md-3">
                <img src="static/img/pic_2.jpg" class="logo1"> <!-- 左边图片-->
            </div>
            <div class="col-md-9">
                <%
                    IVideoService videoService = new VideoServiceImpl();
                    List<VideoBean> list = videoService.queryNewVideo();
                    List<VideoBean> videoList=new ArrayList<VideoBean>();
                    if(list!=null){
                        videoList=list;
                    }
                    for (VideoBean videoBean : videoList) {
                %>
                <%-- 视频 --%>
                <div class="col-md-4 videos">
                    <img src="<%=videoBean.getVideoCoverImg()%>">
                    <p class="videos_url"><a href=""><%=videoBean.getName()%></a></p>
                    <p class="user"><a href=""><%=videoBean.getUploadUsername()%></a> | <a href=""><%=videoBean.getUploadUserFirm()%></a></p>
                </div>
                <%
                    }
                %>




            </div>

        </div>

        <div class="col-md-2 right_side" ><!-- 右侧边-->
                <h4 class="title2">精品文档   最新文档</h4>
            <div class="col-md-12 text">
                <p><a href="">付珍栋 微课脚本</a></p>
                <p><img src="static/img/star_red.png">
                    <img src="static/img/star_red.png">
                    <img src="static/img/star_red.png">
                    <img src="static/img/star_red.png">
                    <img src="static/img/star_red.png">
                    5.0分 4页
                </p>
            </div>  <!-- 右侧边文档-->

            <div class="col-md-12 text">
                <p><a href="">付珍栋 微课脚本</a></p>
                <p><img src="static/img/star_red.png">
                    <img src="static/img/star_red.png">
                    <img src="static/img/star_red.png">
                    <img src="static/img/star_red.png">
                    <img src="static/img/star_red.png">
                    5.0分 4页
                </p>
            </div>

            <div class="col-md-12 text">
                <p><a href="">付珍栋 微课脚本</a></p>
                <p><img src="static/img/star_red.png">
                    <img src="static/img/star_red.png">
                    <img src="static/img/star_red.png">
                    <img src="static/img/star_red.png">
                    <img src="static/img/star_red.png">
                    5.0分 4页
                </p>
            </div>

            <div class="col-md-12 text">
                <p><a href="">付珍栋 微课脚本</a></p>
                <p><img src="static/img/star_red.png">
                    <img src="static/img/star_red.png">
                    <img src="static/img/star_red.png">
                    <img src="static/img/star_red.png">
                    <img src="static/img/star_red.png">
                    5.0分 4页
                </p>
            </div>

            <div class="col-md-12 text">
                <p><a href="">付珍栋 微课脚本</a></p>
                <p><img src="static/img/star_red.png">
                    <img src="static/img/star_red.png">
                    <img src="static/img/star_red.png">
                    <img src="static/img/star_red.png">
                    <img src="static/img/star_red.png">
                    5.0分 4页
                </p>
            </div>

            <div class="col-md-12 text">
                <p><a href="">付珍栋 微课脚本</a></p>
                <p><img src="static/img/star_red.png">
                    <img src="static/img/star_red.png">
                    <img src="static/img/star_red.png">
                    <img src="static/img/star_red.png">
                    <img src="static/img/star_red.png">
                    5.0分 4页
                </p>
            </div>

            <div class="col-md-12 text">
                <p><a href="">付珍栋 微课脚本</a></p>
                <p><img src="static/img/star_red.png">
                    <img src="static/img/star_red.png">
                    <img src="static/img/star_red.png">
                    <img src="static/img/star_red.png">
                    <img src="static/img/star_red.png">
                    5.0分 4页
                </p>
            </div>

            <h5><a href="">更多>></a></h5>
        </div>

    </div>
    <%-- 联盟学校 --%>
    <div class="row" class="jpwk">
        <div class="col-md-10"><!-- 左边内容-->
            <h3 class="title" id="union_school_title">联盟学校<a href="">更多>></a></h3>
            <div class="col-md-3">
                <img src="static/img/pic_4.jpg" class="logo1"> <!-- 左边图片-->
            </div>
            <div class="col-md-9">
                <%-- 学校 --%>
                <div class="col-md-4 videos">
                    <img src="http://www.wkmk.com/upload_dir/school/17.jpg">
                    <p class="videos_url"><a href="">山东省肥城市桃都中学</a></p>
                    <p class="detail">教师 <span> 168 </span> 微课 <span> 137 </span> 文档 <span> 19 </span></p>
                </div>

                    <div class="col-md-4 videos">
                        <img src="http://www.wkmk.com/upload_dir/school/17.jpg">
                        <p class="videos_url"><a href="">山东省肥城市桃都中学</a></p>
                        <p class="detail">教师 <span> 168 </span> 微课 <span> 137 </span> 文档 <span> 19 </span></p>
                    </div>

                    <div class="col-md-4 videos">
                        <img src="http://www.wkmk.com/upload_dir/school/17.jpg">
                        <p class="videos_url"><a href="">山东省肥城市桃都中学</a></p>
                        <p class="detail">教师 <span> 168 </span> 微课 <span> 137 </span> 文档 <span> 19 </span></p>
                    </div>

                    <div class="col-md-4 videos">
                        <img src="http://www.wkmk.com/upload_dir/school/17.jpg">
                        <p class="videos_url"><a href="">山东省肥城市桃都中学</a></p>
                        <p class="detail">教师 <span> 168 </span> 微课 <span> 137 </span> 文档 <span> 19 </span></p>
                    </div>

                    <div class="col-md-4 videos">
                        <img src="http://www.wkmk.com/upload_dir/school/17.jpg">
                        <p class="videos_url"><a href="">山东省肥城市桃都中学</a></p>
                        <p class="detail">教师 <span> 168 </span> 微课 <span> 137 </span> 文档 <span> 19 </span></p>
                    </div>

                    <div class="col-md-4 videos">
                        <img src="http://www.wkmk.com/upload_dir/school/17.jpg">
                        <p class="videos_url"><a href="">山东省肥城市桃都中学</a></p>
                        <p class="detail">教师 <span> 168 </span> 微课 <span> 137 </span> 文档 <span> 19 </span></p>
                    </div>



            </div>

        </div>

        <div class="col-md-2 right_side" ><!-- 右侧边-->
            <h4 class="title2">精品文档   最新文档</h4>
            <div class="col-md-12 person">
                <div><img src="http://www.wkmk.com/upload_dir/12/user/201407/8e241bb9e182fdd1283178468db2a3f1.jpg"></div>
                <div>
                    <p><a href="">俞红</a></p>
                    <p>教科室主任</p>
                </div>

            </div>  <!-- 右侧边教师-->

            <div class="col-md-12 person">
                <div><img src="http://www.wkmk.com/upload_dir/12/user/201407/8e241bb9e182fdd1283178468db2a3f1.jpg"></div>
                <div>
                    <p><a href="">俞红</a></p>
                    <p>教科室主任</p>
                </div>

            </div>

            <div class="col-md-12 person">
                <div><img src="http://www.wkmk.com/upload_dir/12/user/201407/8e241bb9e182fdd1283178468db2a3f1.jpg"></div>
                <div>
                    <p><a href="">俞红</a></p>
                    <p>教科室主任</p>
                </div>

            </div>

            <div class="col-md-12 person">
                <div><img src="http://www.wkmk.com/upload_dir/12/user/201407/8e241bb9e182fdd1283178468db2a3f1.jpg"></div>
                <div>
                    <p><a href="">俞红</a></p>
                    <p>教科室主任</p>
                </div>

            </div>

            <div class="col-md-12 person">
                <div><img src="http://www.wkmk.com/upload_dir/12/user/201407/8e241bb9e182fdd1283178468db2a3f1.jpg"></div>
                <div>
                    <p><a href="">俞红</a></p>
                    <p>教科室主任</p>
                </div>

            </div>

            <div class="col-md-12 person">
                <div><img src="http://www.wkmk.com/upload_dir/12/user/201407/8e241bb9e182fdd1283178468db2a3f1.jpg"></div>
                <div>
                    <p><a href="">俞红</a></p>
                    <p>教科室主任</p>
                </div>

            </div>

            <div class="col-md-12 person">
                <div><img src="http://www.wkmk.com/upload_dir/12/user/201407/8e241bb9e182fdd1283178468db2a3f1.jpg"></div>
                <div>
                    <p><a href="">俞红</a></p>
                    <p>教科室主任</p>
                </div>

            </div>



            <h5><a href="">更多>></a></h5>
        </div>

    </div>
</div>

<%@include file="footer.jsp"%>


</body>
</html>
